<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            border: 1px red solid;
        }
    </style>
</head>
<body>
    <!-- 
        5.vertical-align属性应用

        CSS的vertical-align属性使用场景∶经常用于设置图片或者表单(行内块元素)和文字垂直对齐。
        
        官方解释∶用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

        语法∶

        vertical-align : baseline | top | middle | bottom

        值            描述
        baseline      默认。元素放置在父元素的基线上。
        top           把元素的顶端与行中最高元素的顶端对齐
        middle        把此元素放置在父元素的中部。
        bottom        把元素的顶端与行中最低的元素的顶端对齐。



        5.1图片、表单和文字对齐

        图片、表单都属于行内块元素，默认的vertical-align是基线对齐。

        默认文字与图片是基线对齐
        此时可以给图片、表单这些行内块元素的vertical-align属性设置为middle就可以让文字和图片垂直居中对齐了。

     -->

     <div>
        <img src="../../img/phone.jpg" alt="" style="vertical-align: middle;">这是一段文字
        <!-- <br>
        <input type="text"style="height:200px;vertical-align: middle;">这是一段文字
        <br>
        <textarea name="" id="" cols="30" rows="10" style="vertical-align: middle;"></textarea>这是一段文字 -->
     </div>
</body>
</html>